<ui:composition
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:eli="http://java.sun.com/jsf/composite/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:form>
	<rich:panel id="nuevoMensajePanel">

	<fieldset>
		<h:outputLabel value="Asunto: " />
		<h:inputText id="itasunto" value="#{mensajeBean.mensaje.asunto}"  required="true"/>
		<rich:message for="itasunto"/>
		
		<h:outputLabel value="Detalle: " />
		<h:inputTextarea id="itdetalle" value="#{mensajeBean.mensaje.detalle}" required="true"/>
		<rich:message for="itdetalle"/>
	</fieldset>
	<h:selectOneMenu value="#{mensajeBean.catImg}">
		<f:selectItems value="#{mensajeBean.categoriasImg}" var="obj" itemLabel="#{obj.descripcion}" itemValue="#{obj.id}"/>
		<f:ajax execute="@this" render="tecladoPanel"/>
	</h:selectOneMenu>
	
	<rich:panel id="tecladoPanel">
	<fieldset>
		<a4j:repeat value="#{mensajeBean.listImagenes}" var="obj" >
			<h:commandLink action="#{obj.tecleo()}">
				<img src="#{request.contextPath}/resources/imagDicc/#{obj.ruta.trim()}.png" class="teclaImg" />
				<a4j:ajax execute="@this" render="itdetalle"/>
			</h:commandLink>
		</a4j:repeat>
		
	</fieldset>
	</rich:panel>
	<rich:panel style="max-width:92%">
		<f:facet name="header">
                <h:outputText value="Destinatarios"></h:outputText>
            </f:facet>
		<rich:pickList value="#{mensajeBean.destinos}" sourceCaption="Contactos"
			targetCaption="Destinatario" addAllText="Enviar a Todos"
			addText="Enviar" removeAllText="Cancelar Todos" removeText="Cancelar"
			listHeight="100px"
			>
			<f:selectItems value="#{contactosBean.listContacts}" var="contacto"
				itemLabel="#{contacto.nombre}" itemValue="#{contacto.id}" />
		</rich:pickList>
	</rich:panel>

	<rich:panel style="max-width:92%">
		<f:facet name="header">
                <h:outputText value="Opciones de Envio"></h:outputText>
        </f:facet>
	  	 <h:outputLabel	value="Enviar SMS"/>
		 <h:selectBooleanCheckbox value="#{mensajeBean.mensaje.sms}"/>
		 
		 <h:outputLabel	 value="Enviar Mail"/>
		 <h:selectBooleanCheckbox  value="#{mensajeBean.mensaje.mail}"/>
		
		 <h:outputLabel	value="Enviar Mensaje de voz"/>
		 <h:selectBooleanCheckbox value="#{mensajeBean.mensaje.audio}"/>
	  	
	</rich:panel>		
</rich:panel>


<h:commandButton value="Enviar" action="#{mensajeBean.enviar()}" >
		<a4j:ajax execute="nuevoMensajePanel @this" render="nuevoMensajePanel "/>
		</h:commandButton>



	<rich:messages globalOnly="true" />
</h:form>
		
</ui:composition>